<template>
	<view class="container">
		<!-- 自定义头部 -->
		<BhTitle titleText="我的会员" :showRetIcon="true"></BhTitle>

		<view class="header">
			<!-- <view v-if="modifyNickName" class="msg  bh-row bh-justify-space-between">
        温馨提示：为了您的使用体验，建议尽快修改昵称哦
      </view> -->
			<!-- background: #F2F2F2; 非会员-->
			<!-- linear-gradient(to right, #FFD700, #FFFFE0); 会员 -->
			<!-- 会员字体颜色 2196F3 FF5722 -->
			<view class="header-top" style="background: #F2F2F2;position:relative">
				<image class="avatar" :src="sessionDto.userDto.avatarUrl"
					mode="scaleToFill" />
				<view class="nickname-wrap">
					<view class="nickname bh-col bh-justify-space-between bh-align-start">
						<view class="nickname-name fw600">
							<text>{{ sessionDto.userDto.nickName }}</text>
							<image v-if="isMember" style="width:36rpx;height: 36rpx;padding-left: 4rpx;padding-top: 8rpx;"
								src="@/static/images/member/member_flg.svg"></image>
						</view>
						<view v-if="sessionDto.postNumber > 0" class="nickname-label">
							<image class="label-icon" src="../../static/images/detail/renzheng.svg"
								mode="scaleToFill" />
							<view class="label-title">店主认证</view>
						</view>
					</view>
					<view class="nickname-arrow-wrap" style="position: absolute;
    bottom: -20rpx;
    right: 20rpx;
    font-size: 24rpx;
    color: #666;">
						<view @click="navToPage('/MemberPage/member_index/member_pay_record?tabIndex=1')">购买记录</view>
						<!-- <image src="../../static/images/my_right_arrow.svg" mode="scaleToFill" class="nickname-arrow" /> -->
					</view>
				</view>
			</view>
			<view class="authority-view">
				<view class="name">
					会员尊享特权服务
				</view>
				<view class="authority-box bh-row bh-justify-space-between">
					<view class="">
						<image src="@/static/images/member/authority-name1.png" mode=""></image>
						<view class="">抖音推广</view>
					</view>
					<view class="">
						<image src="@/static/images/member/authority-name2.png" mode=""></image>
						<view class="">无限聊天</view>
					</view>
					<view class="">
						<image src="@/static/images/member/authority-name3.png" mode=""></image>
						<view class="">无限通话</view>
					</view>
					<view class="">
						<image src="@/static/images/member/authority-name4.png" mode=""></image>
						<view class="">专享活动</view>
					</view>
				</view>
			</view>
			<view class="purchase-wrap">
				<view v-if="isMember" class="post-title">
					<text>会员有效期</text>
					<text style="font-size: 28rpx;font-weight: normal;
    color: #666;"> ({{sessionDto.userDto.memberExpireDate}})</text>
	</view>
	<view v-if="!isMember" class="post-title">
					<text>会员套餐</text>
					<!-- <text style="font-size: 28rpx;font-weight: normal;
	color: #666;"> ({{sessionDto.userDto.memberExpireDate}})</text> -->
	</view>
				<view v-if="!isMember" style="margin-right: 12px;
    margin-left: 12px;
    border-radius: 24px;
    height: 40px;
    align-items: center;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: flex-start;
    color: #333;
    border: 2rpx solid #f87147;
    box-shadow: 2px 2px #f5f5f5;">
					<text>季度（93天）｜</text><text style="color:#f87147">¥{{memberPrice}}</text>
				</view>
			</view>
			<view v-if="!isMember" @click="jsapiOrder" style="margin-right: 12px;
    margin-left: 12px;
    border-radius: 24px;
    height: 100rpx;
    align-items: center;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
    color: white;
	background:#f87147;
	margin-top: 50rpx;
    box-shadow: 2px 2px #f5f5f5;">
				立即购买
			</view>
			<view v-if="isMember && sessionDto.userDto.mgr == 1" @click="jsapiMemberRefund" style="margin-right: 12px;
			margin-left: 12px;
			border-radius: 24px;
			height: 100rpx;
			align-items: center;
			display: flex;
			padding-left: 12px;
			padding-right: 12px;
			justify-content: center;
			color: white;
			background:#f87147;
			margin-top: 50rpx;
			box-shadow: 2px 2px #f5f5f5;">
						申请退款
					</view>


		</view>
		

		<show-add-post-sheet :show="showPostAdd1" @close="showPostAdd1 = false"></show-add-post-sheet>

		<show-custom-tips-pay></show-custom-tips-pay>
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api';
	import {
		Dict
	} from '../../components/custom_views/dict';
	import BhTabbarfooternew from '../../components/custom_views/bh-tabbarfooternew.vue';

	import showAddPostSheet from '../../components/custom_views/show-add-post-sheet.vue';
	import {
		commonMixin
	} from '../../components/custom_views/mixin';
	import BhTitle from '../../components/custom_views/bh-title.vue'

	import {
		CustomDate
	} from '../../components/custom_views/custom_date'
import check_utils from '../../components/custom_views/check_utils';
import { CustomDict } from '../../components/custom_views/custom_dict';
import showCustomTipsPay from '../components/show-custom-tips-pay.vue';

	export default {
		components: {
			BhTabbarfooternew,
			showAddPostSheet,
			BhTitle,
			showCustomTipsPay,
		},
		mixins: [commonMixin],
		data() {
			return {
				sessionDto: this.$store.state.sessionDto,
				showPostAdd1: false,
				memberPrice: 5,
			}
		},
		computed: {
			isMember(){
					  return this.$store.state.sessionDto.userDto.memberLevel == 1801 && 
					  CustomDate.calSecondsFromDate(this.$store.state.sessionDto.userDto.memberExpireDate) < 0
			},
			userRoleName() {
				if (this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value) {
					// todo 转店铺的角色
					return '切换找铺';
				} else if (userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value) {
					// todo 找店铺的角色
					return '切换转铺';
				}
			},
			isSell() {
				return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopSell.value
			},
			isBuy() {
				return this.userRoleId == Dict.PostMainTypeEnum.Shop.childs.ShopBuy.value
			},
			beenAddViewNumber() {
				let clickedBeenAddViewNumber = uni.getStorageSync('clickedBeenAddViewNumber')
				let now = CustomDate.formatCurrentDate('yyyy-MM-dd')
				if (clickedBeenAddViewNumber == now) {
					console.log('当日已经点击过')
					return false
				} else {
					return this.sessionDto.metricRecordDtoMap.beenAddViewNumber > 0
				}
			},
			modifyNickName() {
				if (this.$store.state.sessionDto.userDto.nickName && (this.$store.state.sessionDto.userDto.nickName
						.startsWith('Bh') ||
						this.$store.state.sessionDto.userDto.nickName.startsWith('lpd'))) {
					return true
				} else {
					return false
				}
			}
		},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			console.log('页面参数', options)
			this.initApiData(options)
			let capsule = this.capsule = uni.getMenuButtonBoundingClientRect()
			console.log(capsule)
			this.titleHeight = capsule.height + 10 + capsule.top
			// if(this.$sore.state.sessionDto.userDto.nickName.startWith('Bh')){
			//   this.showCustomModel({

			//   })
			// }
			// uni.navigateTo({
			//   url: '/pages/post_add_sell/post_add_sell'
			// })
		},
		methods: {
			
			jsapiMemberRefund(){
				let that = this
				Api.UserApi.jsapiMemberRefund(that, {
					outTradeNo: that.sessionDto.userDto.memberTradeNo,
					userId: that.sessionDto.userDto.userId
				},(res)=>{
					let resInfo = res.code + '-' + res.msg
					uni.showModal({
						title: '退款申请',
						content: resInfo,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					// if(res.code == 200){
					// 	check_utils.showCustToast('退款申请成功')
					// }
				}, true)
			},
			
			jsapiOrder(){
				let that = this
				// Api.TrackApi.trackAdd(that, {
				//   userId: uni.getStorageSync('userId'),
				//   targetUserId: uni.getStorageSync('userId'),
				//   recordId: 0,
				//   extendInfo: CustomDict.TraceEventType.BtnAddPurchaseMember.name,
				//   eventType: CustomDict.TraceEventType.BtnAddPurchaseMember.value,
				//   trackCount: 1
				// }, (res) => {
							
				// }, false)
				
				that.showCustomTips({
				  content: '季度会员卡5¥\n您享有3天犹豫期，3天内可联系在线客服申请退款',
				  confirmText: '确认',
				  title: '订单确认',
				  cancelText: '再想想',
				  success(res1) {
				    if (res1.confirm) {
				      Api.UserApi.jsapiOrder(that, {}, (res) => {
				      	if(res.code == 200){
				      		uni.requestPayment
				      		(
				      		  {
				      		    "timeStamp": res.data.timeStamp,
				      		    "nonceStr": res.data.nonceStr,
				      		    "package": res.data.packageVal,
				      		    "signType": res.data.signType,
				      		    "paySign": res.data.paySign,
				      		    "success":function(res1){
				      				console.log('小程序请求支付成功', res1)
				      				// 重定向到支付结果页面
				      				uni.redirectTo({
				      					url:'/MemberPage/member_index/member_pay_suc?outTradeNo='+res.data.outTradeNo
				      				})
				      			},
				      		    "fail":function(res1){
				      				console.log('小程序请求支付失败', res1)
				      			},
				      		    "complete":function(res1){
				      				console.log('小程序请求支付完成', res1)
				      			}
				      		  }
				      		)
				      	}else{
				      		check_utils.showCustToast(res.msg)
				      	}
				      })
				    } else {
						// that.hideCustomModal()
				    }
				  }
				})
				
				
			},
			navToConversationList() {
				Api.CustRequestSubscribeMessage(
					() => {
						uni.navigateTo({
							url: '/TUIKit/components/TUIConversation/index'
						})
					},
					() => {
						uni.navigateTo({
							url: '/TUIKit/components/TUIConversation/index'
						})
					}
				)

			},

			clickBeenCollectNumber() {
				this.sessionDto.metricRecordDtoMap.beenAddCollectNumber = -1
				this.navToPage('/PostPage/post_list_my_collect/post_list_other_collect?tabIndex=1')
			},
			/**
			 * 点击我的曝光
			 */
			clickBeenAddViewNumber() {
				let now = CustomDate.formatCurrentDate('yyyy-MM-dd')
				uni.setStorageSync('clickedBeenAddViewNumber', now)
				this.sessionDto.metricRecordDtoMap.beenAddViewNumber = -1
				// @click="navToPage('/pages/post_list_my_collect/post_list_other_collect?tabIndex=1')"
				this.navToPage('/PostPage/post_list_my_collect/post_list_other_collect')
				// this.navToPage('/pages/post_list_my_scan/post_list_other_scan')
			},

			initApiData(options) {
				console.log('页面参数1', options)
				let that = this
				// /** todo 优选店铺列表 */
				// Api.PostSellApi.listOfHighQuality(that, (res) => { })
				// // /** todo 最新求租列表 */
				// Api.PostBuyApi.listOfLatest(that, {}, (res) => {
				//   // todo
				// })

			},
			onChangeFooterTab(footerTab) {
				console.log('点击的footer信息', footerTab)
				if (footerTab.index == 1) {
					this.showPostAdd1 = true
				} else if (footerTab.index == 0) {
					uni.redirectTo({
						url: '/pages/home/home'
					})
				}
			},
			chooseCancel() {
				this.showPostAdd1 = false;
			},
		},
		watch: {},
		onPullDownRefresh() {
			this.initApiData({})
		},

		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	@import url(../../static/css/base.css);

	page {
		height: 100vh;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		height: 100vh;
	}

	.header {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 28%);

		.msg {
			font-size: 24rpx;
			color: #F87147;
			padding: 0 32rpx;
			background-color: rgba(248, 113, 71, 0.1);
			height: 72rpx;
			line-height: 72rpx;
		}

		.header-top {
			display: flex;
			flex-direction: row;
			margin-left: 24rpx;
			background: linear-gradient(192deg, #FFF1E4 34%, #FFFFFF 69%);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			height: 286rpx;
			margin-right: 24rpx;
			border-radius: 24rpx;
			align-items: center;
			padding-left: 37rpx;
			padding-right: 37rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.nickname-wrap {
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-left: 32rpx;

				.nickname {


					.nickname-name {
						font-size: 36rpx;
						color: rgba(0, 0, 0, 0.85);
						margin-bottom: 15rpx;
						display: flex;
						align-items: center;
					}

					.nickname-label {
						border-radius: 200rpx;
						box-sizing: border-box;
						height: 32rpx;
						border: 2rpx solid #F87147;
						width: 128rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.label-icon {
							display: block;
							width: 16.7rpx;
							height: 16rpx;

						}

						.label-title {
							font-size: 20rpx;
							color: #F87147;
							margin-left: 2.5rpx;
						}
					}
				}

			}

			.nickname-arrow-wrap {
				// width: 70rpx;
				height: 70rpx;
				text-align: right;
				padding-top: 32rpx;

				.nickname-arrow {
					width: 16rpx;
					height: 26rpx;
				}
			}
		}

		.authority-view {
			width: 700rpx;
			border-radius: 12rpx;
			// background: #FFFFFF;	
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			margin: 50rpx 25rpx 25rpx 25rpx;
			padding: 100rpx 50rpx 30rpx;
			box-sizing: border-box;
			position: relative;
			background: #FFF1E4;

			.authority-box {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					margin-bottom: 10rpx;
				}

				font-size: 24rpx;
				text-align: center;
				color: #844935;
				font-weight: 600;
			}

			.name {
				width: 592rpx;
				height: 115rpx;
				background: url(@/static/images/member/authority-name.png) left top no-repeat;
				background-size: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: -30rpx;
				margin: auto;
				text-align: center;
				line-height: 110rpx;
				font-size: 34rpx;
				font-weight: 600;
				color: #CB3800;
				letter-spacing: 8rpx;
			}
		}

		.header-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-left: 80rpx;
			padding-right: 80rpx;
			margin-top: 64rpx;
			padding-bottom: 32rpx;

			.collect-wrap {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.collect-value {
					font-size: 40rpx;
					font-weight: 600;
					color: #333333;
					margin-bottom: 28rpx;
				}

				.collect-title {
					font-size: 28rpx;
					font-weight: normal;

					color: #9E9E9E;
				}
			}
		}

		.purchase-wrap {
			margin-top: 32rpx;
			padding: 10rpx 0 10rpx 0;
			.post-title {
				margin-left: 32rpx;
				font-size: 32rpx;
				font-weight: bold;

				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 32rpx;
			}
		}
	}

	button::after {
		content: '';
		border: none;
	}

	.body-container {
		background-color: white;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		padding-left: 68rpx;
		padding-right: 56rpx;

		.body-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 26rpx;
			padding-bottom: 26rpx;

			.prefix-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 29rpx;
			}

			.prefix-icon-tip {
				position: absolute;
				top: 0px;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				left: 40rpx;
				top: -8rpx;
				opacity: 1;
				background: #EF2D2D;
			}

			.prefix-icon-tip-new {
				top: 0px;
				padding-left: 5rpx;
				padding-right: 5rpx;
				border-radius: 50%;
				opacity: 1;
				font-size: 24rpx;
				color: #ff3b3b;
				font-size: 28rpx;
				font-weight: 600;
			}

			.body-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				flex: 1;
			}

			.contact {
				background-color: transparent;
				border-radius: 0rpx;
				box-sizing: inherit;
				line-height: normal;
				padding: 0;
				margin: 0;
				padding-left: 0;
				padding-right: 0;
				text-align: left;
				border: none;
				border: 0px solid red;
			}

			.contactbutton::after {
				content: ''
			}

			.sufix-wrap {
				width: 90rpx;
				text-align: right;

				.sufix-content {
					font-size: 28rpx;
					font-weight: normal;
					color: rgba(0, 0, 0, 0.85);
				}

				.sufix-holder {
					font-size: 24rpx;

					color: #999999;
				}
			}
		}
	}
</style>